import { FC, useState } from 'react';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'
import { Space } from 'antd';
interface BraftProps { }

const Braft: FC<BraftProps> = () => {
    const [editorState, seteditorState] = useState('')
    // const [outputHTML, setoutputHTML] = useState('')
    const handleChange = (editorState: any) => {
        console.log(editorState);
        seteditorState(editorState.toHTML())
    }
    return (
        <Space direction='vertical' style={{ width:'100%' }}>
            <div className="editor-wrapper" style={{ width: 1200 ,display: 'flex', justifyContent: 'space-between'  }}>
                <BraftEditor
                    value={editorState}
                    onChange={handleChange}
                />
                <div style={{width:'100%',textAlign:'center'}}>
                    <div style={{fontSize:36,color:'red',marginBottom:'10px'}}>预览</div>
                    <div dangerouslySetInnerHTML={{ __html: editorState }}></div>
                </div>
            </div>

        </Space>
    );
}

export default Braft;
